<!DOCTYPE HTML>
<html>
<head>
<!-- 
  Copyright 2014, J. Pol
 
  This file is part of free software: you can redistribute it and/or modify it under the terms of the
  GNU General Public License as published by the Free Software Foundation.
  
  This package is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even
  the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
  
  See the GNU General Public License for more details. A copy of the GNU General Public License is
  available at <http://www.gnu.org/licenses/>.
 -->
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<title>DiBL: Diagonal Pair Traversal Pattern browser</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
<script type="text/javascript" src="script.js"></script>
</head>
<body onload="showPairTraversal();diagramTypeChanged();">
	<h1>Bobbin Lace - Diagonal pair traversal pattern browser</h1>
	<p>
		Powered by: <a href="https://code.google.com/p/dibl/">DiBL</a>
	</p>
	<p>
		Based on:
		<br><a href="http://web.uvic.ca/~vmi/">Veronika Irvine</a>.
		Broadening the Palette for Bobbin Lace: A Combinatorial Approach. 
		<br><em><a
			href="http://www.bridgesmathart.org/">Bridges 2012</a>: Mathematics,
			Music, Art, Architecture, Culture, pages 191-198. Tessellations
			Publishing, 2012.</em>
	</p>

	<h2>Configure a diagram</h2>
	<form name="diagramConfig">
		<input name="traversalType" type="hidden" value="brick"/>
		<table>
			<tbody>
				<tr>
					<td>pattern&nbsp;</td>
					<td colspan="8"><select size="1" name="options" onchange="showPairTraversal()">
							<option value="">no flip/rotation</option>
							<option value="-x">flip &#10594;</option>
							<option value="-y">flip &#10595;</option>
							<option value="-x -y">rotate</option>
					</select> dimensions: <select size="1" name="dimensions" onchange="showPairTraversal();setRangeMax(this)">
							<option value="3x3">3x3 (max nr: 8)</option>
							<option value="4x4">4x4 (max nr: 222)</option>
					</select> 
						nr: <span id="nr" onclick="alert('hello')">1</span> 
						<input type="range" name="pattern" min="1" max="7" value="1"
						onchange="showRangeValue();showPairTraversal()"
						onkeyup="showRangeValue();showPairTraversal()" />
						<br>Once the slider is selected, you can use the arrow keys for the next/previous pattern.
					</td>
				</tr>
				<tr>
					<td>diagram&nbsp;type&nbsp;</td>
					<td colspan="8"><select size="1" name="diagramType" onchange="showPairTraversal();diagramTypeChanged();">
							<option value="">thread (only: tc / tcptc)</option>
							<option value="-pair">pair (some stitches still sloppy)</option>
					</select></td>
				</tr>
				<tr>
					<td>image&nbsp;type&nbsp;</td>
					<td colspan="8"><select size="1" name="ext" onchange="showPairTraversal()">
							<option value="svg">svg</option>
							<option value="png">png</option>
							<option value="jpg">jpg</option>
							<option value="tiff">tiff</option>
					</select> See <a href="https://code.google.com/p/dibl/wiki/EditDiagrams">edit hints</a>
						for svg images.
					</td>
				</tr>
				<tr>
					<td rowspan="4">stitches&nbsp;</td>
					<td class="narrow"><select size="1" name="A1" onchange="showPairTraversal()">
							<option value="tc">tc</option>
							<option class="pair" value="ctc">ctc</option>
							<option class="pair" value="tctc">tctc</option>
							<option value="tcptc">tcptc</option>
							<option class="pair" value="ctcpctc">ctcpctc</option>
							<option class="pair" value="tctctcptc">tctcptctc</option>
					</select></td>
					<td class="narrow"></td>
					<td class="narrow"><select size="1" name="B1" onchange="showPairTraversal()">
							<option value="tc">tc</option>
							<option class="pair" value="ctc">ctc</option>
							<option class="pair" value="tctc">tctc</option>
							<option value="tcptc">tcptc</option>
							<option class="pair" value="ctcpctc">ctcpctc</option>
							<option class="pair" value="tctctcptc">tctcptctc</option>
					</select></td>
					<td class="narrow"></td>
					<td class="narrow"><select size="1" name="C1" onchange="showPairTraversal()">
							<option value="tc">tc</option>
							<option class="pair" value="ctc">ctc</option>
							<option class="pair" value="tctc">tctc</option>
							<option value="tcptc">tcptc</option>
							<option class="pair" value="ctcpctc">ctcpctc</option>
							<option class="pair" value="tctctcptc">tctcptctc</option>
					</select></td>
					<td class="narrow"></td>
					<td class="narrow"><select size="1" name="D1" onchange="showPairTraversal()">
							<option value="tc">tc</option>
							<option class="pair" value="ctc">ctc</option>
							<option class="pair" value="tctc">tctc</option>
							<option value="tcptc">tcptc</option>
							<option class="pair" value="ctcpctc">ctcpctc</option>
							<option class="pair" value="tctctcptc">tctcptctc</option>
					</select></td>
					<td></td>
				</tr>
				<tr>
					<td></td>
					<td><select size="1" name="A2" onchange="showPairTraversal()">
							<option value="tc">tc</option>
							<option class="pair" value="ctc">ctc</option>
							<option class="pair" value="tctc">tctc</option>
							<option value="tcptc">tcptc</option>
							<option class="pair" value="ctcpctc">ctcpctc</option>
							<option class="pair" value="tctctcptc">tctcptctc</option>
					</select></td>
					<td></td>
					<td><select size="1" name="B2" onchange="showPairTraversal()">
							<option value="tc">tc</option>
							<option class="pair" value="ctc">ctc</option>
							<option class="pair" value="tctc">tctc</option>
							<option value="tcptc">tcptc</option>
							<option class="pair" value="ctcpctc">ctcpctc</option>
							<option class="pair" value="tctctcptc">tctcptctc</option>
					</select></td>
					<td></td>
					<td><select size="1" name="C2" onchange="showPairTraversal()">
							<option value="tc">tc</option>
							<option class="pair" value="ctc">ctc</option>
							<option class="pair" value="tctc">tctc</option>
							<option value="tcptc">tcptc</option>
							<option class="pair" value="ctcpctc">ctcpctc</option>
							<option class="pair" value="tctctcptc">tctcptctc</option>
					</select></td>
					<td></td>
					<td><select size="1" name="D2" onchange="showPairTraversal()">
							<option value="tc">tc</option>
							<option class="pair" value="ctc">ctc</option>
							<option class="pair" value="tctc">tctc</option>
							<option value="tcptc">tcptc</option>
							<option class="pair" value="ctcpctc">ctcpctc</option>
							<option class="pair" value="tctctcptc">tctcptctc</option>
					</select></td>
				</tr>
				<tr>
					<td><select size="1" name="A3" onchange="showPairTraversal()">
							<option value="tc">tc</option>
							<option class="pair" value="ctc">ctc</option>
							<option class="pair" value="tctc">tctc</option>
							<option value="tcptc">tcptc</option>
							<option class="pair" value="ctcpctc">ctcpctc</option>
							<option class="pair" value="tctctcptc">tctcptctc</option>
					</select></td>
					<td></td>
					<td><select size="1" name="B3" onchange="showPairTraversal()">
							<option value="tc">tc</option>
							<option class="pair" value="ctc">ctc</option>
							<option class="pair" value="tctc">tctc</option>
							<option value="tcptc">tcptc</option>
							<option class="pair" value="ctcpctc">ctcpctc</option>
							<option class="pair" value="tctctcptc">tctcptctc</option>
					</select></td>
					<td></td>
					<td><select size="1" name="C3" onchange="showPairTraversal()">
							<option value="tc">tc</option>
							<option class="pair" value="ctc">ctc</option>
							<option class="pair" value="tctc">tctc</option>
							<option value="tcptc">tcptc</option>
							<option class="pair" value="ctcpctc">ctcpctc</option>
							<option class="pair" value="tctctcptc">tctcptctc</option>
					</select></td>
					<td></td>
					<td><select size="1" name="D3" onchange="showPairTraversal()">
							<option value="tc">tc</option>
							<option class="pair" value="ctc">ctc</option>
							<option class="pair" value="tctc">tctc</option>
							<option value="tcptc">tcptc</option>
							<option class="pair" value="ctcpctc">ctcpctc</option>
							<option class="pair" value="tctctcptc">tctcptctc</option>
					</select></td>
					<td></td>
				</tr>
				<tr>
					<td></td>
					<td><select size="1" name="A4" onchange="showPairTraversal()">
							<option value="tc">tc</option>
							<option class="pair" value="ctc">ctc</option>
							<option class="pair" value="tctc">tctc</option>
							<option value="tcptc">tcptc</option>
							<option class="pair" value="ctcpctc">ctcpctc</option>
							<option class="pair" value="tctctcptc">tctcptctc</option>
					</select></td>
					<td></td>
					<td><select size="1" name="B4" onchange="showPairTraversal()">
							<option value="tc">tc</option>
							<option class="pair" value="ctc">ctc</option>
							<option class="pair" value="tctc">tctc</option>
							<option value="tcptc">tcptc</option>
							<option class="pair" value="ctcpctc">ctcpctc</option>
							<option class="pair" value="tctctcptc">tctcptctc</option>
					</select></td>
					<td></td>
					<td><select size="1" name="C4" onchange="showPairTraversal()">
							<option value="tc">tc</option>
							<option class="pair" value="ctc">ctc</option>
							<option class="pair" value="tctc">tctc</option>
							<option value="tcptc">tcptc</option>
							<option class="pair" value="ctcpctc">ctcpctc</option>
							<option class="pair" value="tctctcptc">tctcptctc</option>
					</select></td>
					<td></td>
					<td><select size="1" name="D4" onchange="showPairTraversal()">
							<option value="tc">tc</option>
							<option class="pair" value="ctc">ctc</option>
							<option class="pair" value="tctc">tctc</option>
							<option value="tcptc">tcptc</option>
							<option class="pair" value="ctcpctc">ctcpctc</option>
							<option class="pair" value="tctctcptc">tctcptctc</option>
					</select></td>
				</tr>
				<tr><td></td>
					<td colspan="8">Depending on the chosen pattern dimensions, 
						the last rows and columns are ignored.</td>
				</tr>
			</tbody>
		</table>
		<input type="submit" value="submit" target="diagramImage" onclick="document.getElementById('commands').className='show';return false;">
	</form>
	<div id="commands" class="hide">
	<p>A submit button is not yet implemented.
		For now you have to 
		<a href="https://code.google.com/p/dibl/wiki/Install">install DiBL</a>
		and copy-paste the configured command into a 
		<code>.sh</code> or <code>.bat</code> file to execute.
	</p>
	<ul>
		<li>sh (Mac / Unix, the multiline string requires quotes)<pre id="sh">&nbsp;</pre></li>
		<li>bat (Windows, the multiline string requires empty lines)<pre id="bat">&nbsp;</pre></li>
	</ul>
	</div>
	<iframe name="diagramImage" src="../input/PairTraversal/brick/4x4.svg"/>
</body>
</html>